<template>
  <view class="box">
    <view class="example">
      <!-- 基础用法，不包含校验规则 -->
      <uni-forms
        label-width="100px"
        ref="baseForm"
        :rules="rules"
        :model="baseFormData"
      >
        <uni-forms-item class="label" label="用章部门" required name="deptId">
          <uni-data-select
            v-model="baseFormData.deptId"
            :localdata="deptRange"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item class="label" label="用章人" required name="userId">
          <uni-data-select
            v-model="baseFormData.userId"
            :localdata="userRange"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item class="label" label="用章事由" required name="reason">
          <uni-easyinput
            type="textarea"
            v-model="baseFormData.reason"
            placeholder="请输入用章事由"
          />
        </uni-forms-item>
        <uni-forms-item class="label" label="用章时间" required name="sealTime">
          <uni-datetime-picker
            type="date"
            :clear-icon="false"
            v-model="baseFormData.sealTime"
          />
        </uni-forms-item>
        <uni-forms-item class="label" label="印章类型" required name="sealType">
          <uni-data-select
            v-model="baseFormData.sealType"
            :localdata="sealRange"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item class="label" label="所属公司" required name="company">
          <uni-data-select
            v-model="baseFormData.company"
            :localdata="companyRange"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item class="label" label="份数" required name="copies">
          <uni-easyinput
            v-model="baseFormData.copies"
            placeholder="请输入份数"
          />
        </uni-forms-item>
        <uni-forms-item
          class="label"
          style="margin-bottom: 10px"
          label="经办人"
          required
          name="agentUserId"
        >
          <uni-data-select
            v-model="baseFormData.agentUserId"
            :localdata="agentRange"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
      </uni-forms>
    </view>
    <uni-file-picker
      v-model="file"
      file-mediatype="all"
      :limit="1"
      style="padding: 18px; background-color: #fff;margin:10px 0"
      title="上传文件"
      @select="select"
    ></uni-file-picker>
    <view class="bottom">
      <u-cell-group>
        <u-cell
          title="审批流程"
          label="已有管理员预设审批人，不可修改和删除"
          center
        ></u-cell>
      </u-cell-group>
      <view v-for="item in flow" :key="item" class="step">
        <view class="step_left">
          <uni-icons type="person" size="30"></uni-icons>
          <view class="line"></view>
          <!-- <uni-icons type="person" size="30"></uni-icons> -->
        </view>
        <view class="step_right">
          <view class="step_right_title">
            <text>{{ item }}</text>
          </view>
          <view class="step_right_con">
            <text></text>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 80px"></view>
    <view class="below">
      <u-button class="btn" type="primary" @click="zanSubmit('baseForm')">
        暂存
      </u-button>
      <u-button class="btn" type="primary" @click="submit('baseForm')">
        提交申请
      </u-button>
    </view>
  </view>
</template>

<script>
import {
  userList,
  deptList,
  sealList,
  companyList,
  taskNode,
  add,
} from "@/api/chapters";
import { onLoad } from "uview-ui/libs/mixin/mixin";
export default {
  name: "MinirabbitAdd",

  data() {
    return {
      // 表单数据
      baseFormData: {
        deptId: "",
        userId: "",
        reason: "",
        sealTime: "",
        sealType: "",
        company: "",
        copies: "",
        agentUserId: "",
      },
      file: [],
      flow: [],
      deptRange: [], //用章部门
      userRange: [], //用章人
      sealRange: [], //印章
      companyRange: [], //所属公司
      agentRange: [], //经办人
      rules: {
        deptId: {
          rules: [
            {
              required: true,
              errorMessage: "用章部门不能为空",
            },
          ],
        },
        userId: {
          rules: [
            {
              required: true,
              errorMessage: "用章人不能为空",
            },
          ],
        },
        reason: {
          rules: [
            {
              required: true,
              errorMessage: "用章事由不能为空",
            },
          ],
        },
        sealTime: {
          rules: [
            {
              required: true,
              errorMessage: "用章时间不能为空",
            },
          ],
        },
        sealType: {
          rules: [
            {
              required: true,
              errorMessage: "印章类型不能为空",
            },
          ],
        },
        company: {
          rules: [
            {
              required: true,
              errorMessage: "所属公司不能为空",
            },
          ],
        },
        copies: {
          rules: [
            {
              required: true,
              errorMessage: "份数不能为空",
            },
          ],
        },
        agentUserId: {
          rules: [
            {
              required: true,
              errorMessage: "经办人不能为空",
            },
          ],
        },
      },
    };
  },
  async onLoad(options) {
    const user = await userList();
    this.userRange = user.data.records.map((item) => {
      return {
        text: item.name,
        value: item.id,
      };
    });
    this.agentRange = user.data.records.map((item) => {
      return {
        text: item.deptName,
        value: item.id,
      };
    });
    const dept = await deptList();
    this.deptRange = dept.data[0].children.map((item) => {
      return {
        text: item.deptName,
        value: item.id,
      };
    });
    const seal = await sealList();
    this.sealRange = seal.data.map((item) => {
      return {
        text: item.dictValue,
        value: item.dictKey,
      };
    });
    const company = await companyList();
    this.companyRange = company.data[0].children.map((item) => {
      return {
        text: item.deptName,
        value: item.id,
      };
    });
    if (options.row) {
      const row = JSON.parse(options.row).variables;
      this.baseFormData.deptId = this.deptRange.find(
        (item) => item.text === row.deptId
      )?.value;
      this.baseFormData.userId = this.userRange.find(
        (item) => item.text === row.userId
      )?.value;
      this.baseFormData.sealType = this.sealRange.find(
        (item) => item.text === row.sealType
      )?.value;
      this.baseFormData.company = this.companyRange.find(
        (item) => item.text === row.company
      )?.value;
      this.baseFormData.agentUserId = this.agentRange.find(
        (item) => item.text === row.agentUserId
      )?.value;
      this.baseFormData.reason = row.reason;
      this.baseFormData.sealTime = row.sealTime;
      this.baseFormData.copies = row.copies;
      this.file = [
        {
          name: row.fileName,
          url: row.fileUrl,
        },
      ];
    }
    const { data } = await taskNode();
    this.flow = data;
  },
  mounted() {
    const value = JSON.parse(localStorage.getItem("chaptersApply"));
    if (value) {
      uni.showModal({
        title: "提示",
        content: "是否恢复上次已填写的数据",
        success: (res) => {
          if (res.confirm) {
            this.baseFormData = value;
            this.file = value.file;
          } else if (res.cancel) {
          }
        },
      });
    }
  },

  methods: {
    select(e) {
      uni.uploadFile({
        url: "http://192.168.3.55:1889/api/blade-resource/oss/endpoint/put-file-attach", //仅为示例，非真实的接口地址
        filePath: e.tempFilePaths[0],
        name: "file",
        formData: {
          // 'user': 'test'
        },
        success: (uploadFileRes) => {
          const data = JSON.parse(uploadFileRes.data);
          this.file = [
            {
              name: data.data.originalName,
              url: data.data.link,
            },
          ];
        },
      });
    },
    async submit(ref) {
      const res = await this.$refs[ref].validate();
      const data = {
        ...res,
        file: this.file[0]
          ? [
              {
                label: this.file[0]?.name,
                value: this.file[0]?.url,
              },
            ]
          : [],
      };
      await add(data);
      localStorage.removeItem("chaptersApply");
      uni.showToast({
        title: `提交通过`,
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
    async zanSubmit(ref) {
      const res = await this.$refs[ref].validate();
      const value = {
        ...res,
        file: this.file,
      };
      localStorage.setItem("chaptersApply", JSON.stringify(value));
      uni.showToast({
        title: `暂存成功`,
      });
    },
    change() {},
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  min-height: 100vh;
  background-color: #f2f2f2;
}
.example {
  background-color: #fff;
  padding: 5px 0;
}
.label {
  margin-top: 10px;
  padding: 0 12px 0 18px !important;
}
.bottom {
  margin-top: 10px;
  background-color: #fff;
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 20px;
}
.step {
  display: flex;
  padding: 10px;
  width: 100%;
  .step_left {
    flex: 1;
    display: flex;
    flex-direction: column;
    .line {
      width: 1px;
      background-color: #4265f3;
      height: 80px;
      // margin: auto;
      margin: 0 auto;
    }
  }
  .step_right {
    flex: 6;
    .step_right_title {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
    }
    .step_right_con {
      height: 80px;
      font-size: 14px;
      line-height: 80px;
      // padding-left: 40px;
    }
  }
}
.btn {
  width: 40%;
  display: inline-block;
  line-height: 40px;
  margin: 5%;
}
</style>